<template>
  <div class="help-center">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="常见问题" name="faq">
        <el-collapse v-model="activeFaq">
          <el-collapse-item title="如何修改个人资料？" name="1">
            <div>您可以在个人中心页面点击"编辑资料"按钮，在弹出的对话框中修改您的头像、昵称和简介等信息。</div>
          </el-collapse-item>
          <el-collapse-item title="如何查看我的订单？" name="2">
            <div>在个人中心页面点击"我的订单"图标，即可查看您的所有订单信息。</div>
          </el-collapse-item>
          <el-collapse-item title="如何管理收货地址？" name="3">
            <div>点击"我的地址"图标，您可以添加、编辑或删除收货地址。</div>
          </el-collapse-item>
          <el-collapse-item title="如何修改密码？" name="4">
            <div>在"账号安全"页面中，您可以修改登录密码和支付密码。</div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      
      <el-tab-pane label="联系客服" name="contact">
        <div class="contact-info">
          <h3>客服联系方式</h3>
          <p>工作时间：周一至周日 9:00-18:00</p>
          <p>客服电话：400-123-4567</p>
          <p>客服邮箱：support@example.com</p>
          <p>在线客服：点击右下角在线客服图标</p>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="使用指南" name="guide">
        <div class="guide-content">
          <h3>新手入门指南</h3>
          <el-steps :active="1" direction="vertical">
            <el-step title="注册账号" description="使用手机号或邮箱注册账号"></el-step>
            <el-step title="完善资料" description="填写个人基本信息"></el-step>
            <el-step title="开始使用" description="浏览商品、下单购物"></el-step>
            <el-step title="售后服务" description="享受完善的售后服务"></el-step>
          </el-steps>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'HelpCenter',
  data() {
    return {
      activeTab: 'faq',
      activeFaq: ['1']
    }
  }
}
</script>

<style scoped>
.help-center {
  padding: 20px;
}

.contact-info {
  padding: 20px;
  line-height: 2;
}

.contact-info h3 {
  margin-bottom: 15px;
  color: #303133;
}

.guide-content {
  padding: 20px;
}

.guide-content h3 {
  margin-bottom: 20px;
  color: #303133;
}
</style> 